<!DOCTYPE html>
<html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淡白影视 - 注册</title>
<link rel="shortcut icon" href="https://cdn.p00q.cn/favicon.ico">
<link href="https://cdn.p00q.cn/hAdmin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="https://cdn.p00q.cn/hAdmin/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="https://cdn.p00q.cn/hAdmin/css/animate.css" rel="stylesheet">
<link href="https://cdn.p00q.cn/hAdmin/css/style.css?v=4.1.0" rel="stylesheet">

<script>if (window.top !== window.self) {
    window.top.location = window.location;
}</script>
</head>

<body class="gray-bg">

<div class="middle-box text-center loginscreen   animated fadeInDown">
    <div>
        <div>
            <h1 class="logo-name">DB</h1>
        </div>
        <h3>欢迎注册 淡白影视</h3>
        <form id="bd" class="m-t" role="form" action="/reg" method="post">
            <div class="form-group">
                <input id="username" name="username" type="text" class="form-control" placeholder="请输入用户名" required="">
            </div>
            <div class="form-group">
                <input id="password" name="password" type="password" class="form-control" placeholder="请输入密码"
                       required="">
            </div>
            <div class="form-group">
                <input name="rpassword" type="password" class="form-control" placeholder="请再次输入密码" required="">
            </div>
            <div class="form-group">
                <input id="email" name="email" type="email" class="form-control" placeholder="请输入邮箱" required="">
            </div>
            <div class="form-group">
                <input name="yzm" type="text" class="form-control" placeholder="请输入验证码" required="">
                <button type="button" id="getyzm" class="btn btn-block">请求验证码</button>
            </div>
            <div class="form-group text-left">
                <div class="checkbox i-checks">
                    <label class="no-padding">
                        <input name="xy" type="checkbox" class="icheckbox_square-green"><i></i> 我同意注册协议</label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary block full-width m-b">注 册</button>
            <p class="text-muted text-center">
                <small>已经有账户了？</small>
                <a href="/login">点此登录</a>
            </p>
        </form>
    </div>
</div>

<!-- 全局js -->
<script src="https://cdn.p00q.cn/hAdmin/js/jquery.min.js?v=2.1.4"></script>
<script src="https://cdn.p00q.cn/hAdmin/js/bootstrap.min.js?v=3.3.6"></script>
<!-- jQuery Validate -->
<script src="https://cdn.p00q.cn/ys/js/jquery.validate.min.js"></script>
<script src="https://cdn.p00q.cn/ys/js/messages_zh.min.js"></script>
<script>
    $().ready(function () {
// 在键盘按下并释放及提交后验证提交表单
        $("#bd").validate({
            rules: {
                username: {
                    required: true,
                    rangelength: [4, 16]
                },
                password: {
                    required: true,
                    rangelength: [6, 16]
                },
                rpassword: {
                    required: true,
                    rangelength: [6, 16],
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                yzm: "required",
                xy: "required"
            }
        })
    });
    $("#getyzm").click(function () {

        var email = $("#email").val();
        //验证邮箱格式的js正则表达式
        var isEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        var username = $("#username").val();
        //清空显示层中的数据
        $("#emailMess").html("");
        if (email == "") {
            alert("邮箱不能为空");
        } else if (!(isEmail.test(email))) {
            alert("邮箱格式不正确");
        } else if (username == "") {
            alert("用户名不能为空");
        } else {
            $("#getyzm").attr('disabled', true);
            //此处可以操作向后台发送json数据，然后返回验证结果
            $.ajax({
                url: "/getvalidate?email=" + email + "&username=" + username, success: function (result) {
                }
            });
        }
    });
</script>
</body>
</html>
